tampermonkey를 이용한 디버깅

2014/12/29

탬퍼멍키(..라고 읽는것이 맞나..)

.. 를 이용한 디버깅 트릭이다.

크롬 익스텐션에서 tampermonkey를 깐다.

그리스몽키 확장툴이다. 정확한 원리는 알 수 없으나 서당개 3년이면 헬로 월드를 짜는 법. 아마도 이런저런 원리로 동작할 것이다. (예전에 DOM파서 + js 엔진을 비벼서 위젯 엔진 만들어 본 경험 있음..)

1. 그리스몽키 js 코드를 작성한다.
2. 브라우저가 http 리퀘스트를 때리고 리스판스를 받는다.
3. 리스판스 내용을 렌더링 하기 전에 탬퍼멍키가 그리스몽키 js를 리스판스 데이터랑 비빈다.
4. 렌더링하면서 js 컨텍스트가 js 엔진으로 흐르고 커스텀 코드가 동작한다.

이제, 11번가에 뭔가의 써드파티 스크립트를 제공하는 시나리오입니다. 참고로 이 몸은 js 개초보임..

요구사항 : 가격, 상품명, 상품이미지 URL를 써드파티 스크립트를 통해 어디론가 쏘고 싶어요.

METAS = document.getElementsByTagName("META");
len = METAS.length;
for (i = 0; i < len; i++) {
if (METAS[i].getAttribute("property") == "og:image") {
var dawnsea_img_url = METAS[i].getAttribute("content");
console.log(dawnsea_img_url);
} else if (METAS[i].getAttribute("property") == "product:price:amount") {
var dawnsea_price = METAS[i].getAttribute("content");
}
}

dawnsea_title = document.getElementsByTagName("TITLE")[0].innerHTML;

temp_arg = ... blah~~

temp_img.src="http://mymymymy/mymy?data=" + encodeURIComponent(temp_arg);
document.body.appendChild(temp_img);

var input=document.createElement("input");
input.type="button";
input.value="debug";
input.onclick = showAlert;
document.body.appendChild(input);

function showAlert()
{
alert(temp_arg);
alert(temp_img.src);
}

[t:/] is not "technology - root". dawnsea, rss